<!doctype html>
<!--
  ~ jquery.mb.components
  ~ Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
  ~ email: mbicocchi@open-lab.com
  ~ site: http://pupunzi.com
  ~
  ~ Licences: MIT, GPL
  ~ http://www.opensource.org/licenses/mit-license.php
  ~ http://www.gnu.org/licenses/gpl.html
  -->

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <title>mbScrollable</title>

    <style type="text/css">
        body{
            font-family:"Lucida Sans Unicode","Lucida Grande",Helvetica,Arial,sans-serif;
            font-size:13px;
        }

        #wrapper{
            display:none;
            margin:auto;
            margin-top:80px;
            width:1000px;
        }

        #myScroll .scrollEl{
            display:none;
            background:url("elements/elBgnd.png") repeat-x;
            border:1px solid #ddd;
            font-family:sans-serif;
            font-size:180%;
            color:white;
            height:100px;
            padding:10px;
            padding-top:60px;
            text-shadow:#999 1px 1px 1px;
            text-align:center;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
        }
        #myScroll1 .scrollEl{
            background:url("elements/elBgnd.png") repeat-x;
            border:1px solid #ddd;
            font-family:sans-serif;
            font-size:180%;
            padding:10px;
            padding-top:40%;
            color:white;
            height:100%;
            text-shadow:#999 1px 1px 1px;
            text-align:center;
        /*CSS3 properties*/
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }


        #controls div, #controls1 div{
            font-family:sans-serif;
            margin-top:5px;
            background:#fff;
            display:inline-block;
            padding:6px;
            cursor:pointer;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-box-shadow:#999 2px 2px 2px;
            -webkit-box-shadow:#999 2px 2px 2px;
        }

        #myScroll1{
            float:left;
            margin-right:20px;
        }

        #controls .sel, #controls1 .sel{
            color:black !important;
            font-weight:bold;
        }
        #controls .disabled, #controls1 .disabled{
            color:gray;
        }
        #controls .page, #controls1 .page{
            padding:5px;
            color:gray;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="inc/mbScrollable.js"></script>
    <script type="text/javascript">
        $(function(){
            if (self.location.href == top.location.href){
                $("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
                var logo=$("<a href='http://pupunzi.com'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository' style='display:none;'></a>");
                $("body").prepend(logo);
                $("#logo").fadeIn();
            }

            $("#myScroll").mbScrollable({
                width:700,
                elementsInPage:1,
                elementMargin:2,
                shadow:"#999 2px 2px 2px",
                height:"auto",
                controls:"#controls",
                slideTimer:1000,
                autoscroll:true,
                scrollTimer:3000
            });

            $("#myScroll1").mbScrollable({
                dir:"vertical",
                width:140,
                height:400,
                elementsInPage:3,
                elementMargin:6,
                shadow:"#999 2px 2px 2px",
                controls:"#controls1",
                slideTimer:200,
                autoscroll:false,
                scrollTimer:3000
            });

            setTimeout(function(){$("#wrapper").fadeIn();},2000);
        });


    </script>

</head>
<body>


<div id="wrapper">
    <h1 class="a">mb.scrollable.demo</h1>
    <div id="orizontal">
        One element per page; orizontal; autoscroll: true.
        <br>
        <br>
        <div id="myScroll">
            <div class="scrollEl" style="background-color:#9999ff">1</div>
            <div class="scrollEl" style="background-color:#cc9900">2</div>
            <div class="scrollEl" style="background-color:#660066">3</div>
            <div class="scrollEl" style="background-color:#009966">4</div>
            <div class="scrollEl" style="background-color:#6600ff">5</div>
            <div class="scrollEl" style="background-color:#9999ff">6</div>
            <div class="scrollEl" style="background-color:#33cc00">7</div>
            <div class="scrollEl" style="background-color:#cc00cc">8</div>
            <div class="scrollEl" style="background-color:#009999">9</div>
            <div class="scrollEl" style="background-color:#ff66ff">10</div>
            <div class="scrollEl" style="background-color:#33ff33">11</div>
            <div class="scrollEl" style="background-color:#cccc00">12</div>
            <div class="scrollEl" style="background-color:#00cccc">13</div>
            <div class="scrollEl" style="background-color:#ff33ff">14</div>
        </div>

        <div id="controls">
            <div class="first">first</div><div class="prev">prev</div>
            <div class="next">next</div><div class="last">last</div>
            <div class="pageIndex"></div>
            <div class="start">start</div><div class="stop">stop</div>
        </div>

    </div>

    <div id="vertical" >
        <br>
        <br>
        three elements per page; vertical; autoscroll: false.
        <br>
        <br>
        <div id="myScroll1">
            <div class="scrollEl" style="background-color:#9999ff"><span>1</span></div>
            <div class="scrollEl" style="background-color:#cc9900"><span>2</span></div>
            <div class="scrollEl" style="background-color:#660066"><span>3</span></div>
            <div class="scrollEl" style="background-color:#009966"><span>4</span></div>
            <div class="scrollEl" style="background-color:#6600ff"><span>5</span></div>
            <div class="scrollEl" style="background-color:#9999ff"><span>6</span></div>
            <div class="scrollEl" style="background-color:#33cc00"><span>7</span></div>
            <div class="scrollEl" style="background-color:#cc00cc"><span>8</span></div>
            <div class="scrollEl" style="background-color:#009999"><span>9</span></div>
            <div class="scrollEl" style="background-color:#ff66ff"><span>10</span></div>
            <div class="scrollEl" style="background-color:#33ff33"><span>11</span></div>
            <div class="scrollEl" style="background-color:#cccc00"><span>12</span></div>
            <div class="scrollEl" style="background-color:#00cccc"><span>13</span></div>
            <div class="scrollEl" style="background-color:#ff33ff"><span>14</span></div>
        </div>

        <div id="controls1">
            <div class="first">first</div><div class="prev">prev</div>
            <div class="next">next</div><div class="last">last</div><br>
            <div class="pageIndex"></div><br>
            <div class="start">start</div><div class="stop">stop</div>
        </div>
        <br>
        <br>
    </div>

    <div style="padding:6px;position:absolute;z-index:1000; bottom:10px; right:10px; -webkit-border-radius:7px;-moz-border-radius:7px;border:2px solid white; background:#000;text-align:center;color:white;">
        Please support my work<br>with a free donation!<br><br>
        <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=V6ZS8JPMZC446&amp;lc=GB&amp;item_name=mb%2eideas&amp;item_number=MBIDEAS&amp;currency_code=EUR&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG_global%2egif%3aNonHosted">
            <img alt="PayPal" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG_global.gif" border="0">
        </a>
    </div>
</div>
</body>
</html>